<!--  -->
<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>订单管理</el-breadcrumb-item>
            <el-breadcrumb-item>订单列表</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card>
            <el-row :gutter = "20">
                <el-col :span = "8">
                    <el-input placeholder="请输入内容"  class="input-with-select" size = "large"
                     v-model="query"
                     clearable
                     @clear = "getOrderList"
                    >
                    <el-button slot="append" icon="el-icon-search" @click="getOrderList"></el-button>
                </el-input>
                </el-col>
            </el-row>
            <!-- 订单列表 -->
            <el-table
            :data="orderList" border stripe
            style="width: 100%">
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column 
                    prop="order_number"
                    label="订单编号"
                    width="220px"
                    >
                </el-table-column>
                <el-table-column
                    prop="order_price"
                    label="订单价格"
                    >
                </el-table-column>
                <el-table-column
                    prop="pay_status"
                    label="是否付款"
                    >
                     <template slot-scope="scope">
                       <el-tag type="warning" v-if="scope.row.pay_status == 0">未付款</el-tag>
                       <el-tag type="success" v-else>已付款</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="is_send"
                    label="是否发货"
                    >
                     <template slot-scope="scope">
                       <el-tag type="warning" v-if="scope.row.is_send === '否'">否</el-tag>
                       <el-tag type="success" v-else>是</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="create_time"
                    label="下单时间"
                    >
                     <template slot-scope="scope">
                      {{scope.row.create_time | dateFormat}}
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    >
                    <template>
                        <!-- 修改按钮 -->
                       <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit"></el-button>
                       <!-- 展示物流进度的按钮 -->
                       <el-button type="success" icon="el-icon-location-outline" size="mini" @click="showProgress"></el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="block">
                <el-pagination
                :page-sizes="[2, 5, 8, 10]"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-size="pagesize"
                :current-page="pagenum"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
            </div>
            <!-- 修改地址的对话框 -->
            <el-dialog
                title="修改地址"
                :visible.sync="addressVisible"
                width="40%"
                @close = "closeEdit"
                >
                <el-form :model="addressForm" :rules="addressRules" ref="addressRef">
                    <el-form-item label="省市区/县:" label-width="100px" prop = "address1">
                        <el-cascader
                        ref="cascader"
                        size = "small"
                        :options="cityData"
                        v-model="addressForm.address1"
                        clearable
                        change-on-select
                        expand-trigger="hover">
                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="详细地址" label-width="100px" prop = "address2">
                        <el-input v-model="addressForm.address2" autocomplete="off" ></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="addressVisible = false">取 消</el-button>
                    <el-button type="primary" @click="editUserInfo">确 定</el-button>
                </span>
            </el-dialog>

            <!-- 展示物流进度的对话框 -->
             <el-dialog
                title="物流进度"
                :visible.sync="progressVisible"
                width="40%"
                >
                <!-- 物流时间线 -->
                <el-timeline>
                    <el-timeline-item
                    v-for="(activity, index) in progressInfo"
                    color="#0dbc79"
                    :key="index"
                    :timestamp="activity.time">
                        {{activity.context}}
                    </el-timeline-item>
                </el-timeline>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import cityData from"./citydata";
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
return {
    orderList:[],
    total:0,
    pagenum:1,
    pagesize:5,
    query:"",
    addressVisible:false,
    addressForm:{
        address1:[],
        address2:""
    },
    addressRules:{
        address1:[
            { required: true, message: '请选择省市区/县', trigger: 'blur' },
        ],
        address2:[
            { required: true, message: '请填写详细地址', trigger: 'blur' },
        ]
    },
    cityData,
    progressVisible:false,
    // 物流信息
    progressInfo:[]
    
  };
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    // 获取用户列表
    async getOrderList(){
        const {data} = await this.$http({
            url:"orders",
            params:{
                query:this.query,
                pagenum:this.pagenum,
                pagesize:this.pagesize
            }
        });
        if (data.meta.status == 200) {
            this.orderList = data.data.goods;
            this.total = data.data.total;
        }
    },

    handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.pagesize = val;
        this.getOrderList();
      },

    handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.pagenum = val;
        this.getOrderList();
    },
    // 修改地址的对话框
    async edit(){
    //     // console.log(id)
    //     const { data } = await this.$http.put(`orders/${id}`);
    //     // console.log(data);
    //     this.editForm = data.data;
    //     console.log(this.editForm);
        this.addressVisible = true;
    },
    // 修改用户信息并比较
    editUserInfo(){
    //     this.$refs.editRef.validate(async valid =>{
    //         if( !valid ) return
    //         // 校验成功,发送修改用户请求
    //         const {id,email,mobile} = this.editForm;
    //         const {data}  = await this.$http.put(`users/${id}`,{
    //             email,mobile
    //         });
           
    //         if (data.meta.status = 200) {
    //             this.$message({
    //                  type: 'success',
    //                  message: '更改信息成功!'
    //             });
                this.addressVisible = false;
    //             this.getUserList()
    //         }
    //     })
    },
    closeEdit(){
        this.$refs.addressRef.resetFields();
        this.addressVisible = false;
    },
    async showProgress(){
        const {data} = await this.$http.get(`kuaidi/1106975712662`);
        if (data.meta.status !== 200) {
            return this.$message.error("获取物流进度失败!");
        }
        this.progressInfo = data.data;
        console.log(this.progressInfo);
        this.progressVisible = true;
    }

},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
     this.getOrderList();
},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.el-breadcrumb{
    margin-bottom: 15px;
    font-size: 14px;
}
.el-table{
    margin-top: 15px;
}
.el-pagination{
    margin-top: 15px;
}
.el-cascader{
    width: 100%;
}
</style>